<template>
  <div>
    <a-row :gutter="16">
      <a-col :span="8">
        <a-card title="Topic Summary">
          <p>card content</p>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card title="Partitions by Broker">
          <p>card content</p>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card title="Card title">
          <p>card content</p>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16">
      <a-col :span="24">
        <a-card title="Partition Information">

          <div slot="extra">
            <a-button shape="circle" icon="reload" @click="loadPartitions"></a-button>
          </div>


          <a-tabs defaultActiveKey="1">
            <a-tab-pane key="1">
              <span slot="tab">
                <a-icon type="table"/>
                Partition List
              </span>
              <!-- table区域-begin -->
              <div>

                <div style="margin-bottom: 16px">
                  <a-button @click="handleViewTopicMessages">
                    View Messages<a-icon type="right" />
                  </a-button>

                  <span style="margin-left: 5px;">
                格式化时间戳
                <a-switch :defaultChecked="dateFormat" @change='handleDateFormatChange'>
                  <a-icon type="check" slot="checkedChildren"/>
                  <a-icon type="close" slot="unCheckedChildren"/>
                </a-switch>
              </span>
                </div>

                <a-table
                  ref="table"
                  bordered
                  size="middle"
                  :columns="columns"
                  rowKey="partition"
                  :dataSource="dataSource"
                  :pagination="pagination"
                  :loading="loadingPartitions"
                  @change="handleTableChange"
                >
                  <span slot="startTimestamp" slot-scope="text, record">
                    <timestamp-formatter :timestamp="record.start.timestamp" :format="dateFormat"/>
                  </span>
                  <span slot="endTimestamp" slot-scope="text, record">
                    <timestamp-formatter :timestamp="record.end.timestamp" :format="dateFormat"/>
                  </span>
                </a-table>
              </div>
              <!-- table区域-end -->
            </a-tab-pane>
            <a-tab-pane key="2">
              <span slot="tab">
                <a-icon type="bar-chart"/>
                Partition Chart
              </span>
              <partition-offset-chart :loading="loadingPartitions" :partitions="dataSource"/>
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </a-col>
    </a-row>

  </div>
</template>

<script>
  import kafkamanagerApi from '@/api/kafkamanager'
  import ClusterModal from './modules/ClusterModal'
  import TimestampFormatter from './modules/TimestampFormatter'
  import PartitionOffsetChart from './modules/chart/PartitionOffsetChart'
  import Bar from '@/components/chart/Bar'

  export default {
    name: 'topic-detail',
    components: {
      ClusterModal,
      TimestampFormatter,
      PartitionOffsetChart,
      Bar
    },
    data () {
      return {
        loading: false,
        loadingPartitions: false,
        clusterCode: '',
        topicName: '',
        dateFormat: true,
        topic: {},
        dataSource:[],
        pagination:{
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '25', '50', '100'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        columns: [{
          title: 'Partition',
          dataIndex: 'partition',
          sorter: true,
          width: 10,
          sorter: (a, b) => a.partition - b.partition,
        }, {
          title: 'Leader',
          dataIndex: 'leader.id',
          sorter: true,
          width: 10,
          sorter: (a, b) => a.leader.id - b.leader.id,
        }, {
          title: 'Earliest Offset',
          dataIndex: 'start.offset',
          sorter: true,
        }, {
          title: 'Latest Offset',
          dataIndex: 'end.offset',
          sorter: true,
        }, {
          title: 'Earliest Timestamp',
          dataIndex: 'start.timestamp',
          sorter: true,
          scopedSlots: { customRender: 'startTimestamp' },
        }, {
          title: 'Latest Timestamp',
          dataIndex: 'end.timestamp',
          sorter: true,
          scopedSlots: { customRender: 'endTimestamp' },
        }, {
          title: 'Message Size',
          dataIndex: 'messageSize',
          sorter: true,
        }, {
          title: 'Replicas',
          dataIndex: 'replicas',
          customRender:function (text, record, index) {
            let ids = record.replicas.map(b => b.id);
            return '( ' + ids.join(', ').toString() + ' )';
          }
        }, {
          title: 'In Sync Replicas',
          dataIndex: 'isr',
          customRender:function (text, record, index) {
            let ids = record.replicas.map(b => b.id);
            return '( ' + ids.join(', ').toString() + ' )';
          }
        }, {
          title: 'Preferred Leader',
          dataIndex: 'preferredLeader',
          customRender:function (text, record, index) {
            return text.toString();
          }
        }, {
          title: 'Under Replicated',
          dataIndex: 'underReplicated',
          customRender:function (text, record, index) {
            return text.toString();
          }
        }]
      }
    },
    mounted () {
      this.clusterCode = this.$route.params.clusterCode;
      this.topicName = this.$route.params.topicName;
      this.loadData()
    },
    methods: {
      handleTableChange(pagination, filters, sorter){
        this.pagination = pagination;
      },
      handleViewTopicMessages() {
        this.$router.push({path: `/cluster/${this.clusterCode}/topic/${this.topicName}/message`})
      },
      handleDateFormatChange() {
        this.dateFormat = !this.dateFormat;
      },
      loadTopic(){
        this.loading = true;
        kafkamanagerApi.getClusterTopic(this.clusterCode, this.topicName).then(res => {
          this.topic = res;
        }).catch(err => {
          this.$message.error(err.message);
        }).finally(() => {
          this.loading = false;
        })
      },
      loadPartitions(){
        this.loadingPartitions = true;
        kafkamanagerApi.listTopicPartitionSummaries(this.clusterCode, this.topicName).then(res => {
          const result = res.map(tps => {
            let { topicPartition } = tps;
            return { ...topicPartition, ...tps }
          })
          console.log('listTopicPartitionSummaries', result)
          this.dataSource = result;
        }).catch(err => {
          this.$message.error(err.message);
        }).finally(() => {
          this.loadingPartitions = false;
        })
      },
      loadData(){
        this.loadTopic();
        this.loadPartitions();
      },
    }
  }
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }
</style>
